<template>
	<view class="wrap-options flex column">
		<view class="flex align-center just-between">
			<!-- 特价套餐 -->
			<view class="info-bg big-info-bg" v-if="specialInfo" @click="$jump.to('/pages/product/list?type=goods&isDiscount=1')">
				<view class="title-bg bg-img-set" :style="'background-image: url(' + $getImageURL(specialInfo.bg_img) + ');'">
					<view class="flex align-center">
						<image class="title-img" mode="heightFix" :src="$getImageURL(specialInfo.img)" />

						<view class="desc-bg">
							<view class="desc f-24 limit-num-line">{{ specialInfo.title }}</view>
						</view>
					</view>
				</view>

				<view class="goods-list flex just-between">
					<block v-for="(item, index) in specialInfo.list" :key="index">
						<view class="item flex column align-center" @click.stop="$jump.onGoodsDetail(item.id)">
							<view class="file">
								<image class="img" :src="$getImageURL(item.image)" />

								<view
									class="discount-bg bg-img-set f-20 flex align-center"
									:style="'background-image: url(' + $staticImagePath('home/discount_bg.png') + ');'"
									v-if="parseFloat(item.minus) != 0"
								>
									已减{{item.minus}}元
								</view>
							</view>

							<view class="price f-32">¥{{ item.price }}</view>
						</view>
					</block>
				</view>
			</view>

			<view class="flex column just-between big-info-bg">
				<!-- 商圈店铺 -->
				<view class="info-bg" v-if="shopInfo" @click="$jump.to('/pages/business/list')">
					<view class="title-bg bg-img-set" :style="'background-image: url(' + $getImageURL(shopInfo.bg_img) + ');'">
						<view class="flex align-center">
							<image class="title-img" mode="heightFix" :src="$getImageURL(shopInfo.img)" />

							<view class="desc-bg">
								<view class="desc f-24 limit-num-line">{{ shopInfo.title }}</view>
							</view>
						</view>
					</view>

					<scroll-view scroll-x class="list">
						<block v-for="(item, index) in shopInfo.list" :key="index">
							<view class="item" @click.stop="$jump.onStoreIndex(item.id)">
								<image class="file" :src="$getImageURL(item.avatar)" />

								<view class="name f-18 limit-num-line">{{ item.shopname }}</view>
							</view>
						</block>
					</scroll-view>
				</view>
				
				<!-- 本地优选 -->
				<view class="info-bg" v-if="preferredInfo" @click="$jump.to('/pages/product/list?type=goods&isDiscount=2')">
					<view class="title-bg bg-img-set" :style="'background-image: url(' + $getImageURL(preferredInfo.bg_img) + ');'">
						<view class="flex align-center">
							<image class="title-img" mode="heightFix" :src="$getImageURL(preferredInfo.img)" />

							<view class="desc-bg">
								<view class="desc f-24 limit-num-line">{{ preferredInfo.title }}</view>
							</view>
						</view>
					</view>

					<scroll-view scroll-x class="list">
						<block v-for="(item, index) in preferredInfo.list" :key="index">
							<view class="item" @click.stop="$jump.onGoodsDetail(item.id)">
								<image class="file" :src="$getImageURL(item.image)" />
							</view>
						</block>
					</scroll-view>
				</view>
			</view>
		</view>
		
		<view class="flex align-center just-between">
			<!-- 网红 -->
			<view class="info-bg" v-if="travelInfo" @click="$jump.to(`/pages/business/list?cate_id=${$stoarge.getConfigData().healthy_cate_id}`)">
				<view class="title-bg bg-img-set" :style="'background-image: url(' + $getImageURL(travelInfo.bg_img) + ');'">
					<view class="flex align-center">
						<image class="title-img" mode="heightFix" :src="$getImageURL(travelInfo.img)" />
			
						<view class="desc-bg">
							<view class="desc f-24 limit-num-line">{{ travelInfo.title }}</view>
						</view>
					</view>
				</view>
			
				<scroll-view scroll-x class="list">
					<block v-for="(item, index) in travelInfo.list" :key="index">
						<view class="item">
							<image class="file" :src="$getImageURL(item.image)" />
						</view>
					</block>
				</scroll-view>
			</view>
			
			<!-- 全单95折 -->
			<view class="info-bg" v-if="discountInfo" @click="$jump.to(`/pages/business/list?isDiscount=1`)">
				<view class="title-bg bg-img-set" :style="'background-image: url(' + $getImageURL(discountInfo.bg_img) + ');'">
					<view class="flex align-center">
						<image class="title-img" mode="heightFix" :src="$getImageURL(discountInfo.img)" />

						<view class="desc-bg">
							<view class="desc f-24 limit-num-line">{{ discountInfo.title }}</view>
						</view>
					</view>
				</view>

				<scroll-view scroll-x class="list">
					<block v-for="(item, index) in discountInfo.list" :key="index">
						<view class="item" @click.stop="$jump.onStoreIndex(item.id)">
							<image class="file" :src="$getImageURL(item.avatar)" />
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "options",
		props: {
			/**
			 * 特价套餐
			 */
			specialInfo: {
				type: Object,
				default: null,
			},
			/**
			 * 商圈店铺
			 */
			shopInfo: {
				type: Object,
				default: null,
			},
			/**
			 * 本地优选
			 */
			preferredInfo: {
				type: Object,
				default: null,
			},
			/**
			 * 全单95折
			 */
			discountInfo: {
				type: Object,
				default: null
			},
			/**
			 * 康养
			 */
			travelInfo: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
			};
		},
		methods: {},
	};
</script>

<style lang="scss" scoped>
	.wrap-options {
		width: 100%;
		overflow: hidden;
		padding: 0 20rpx;
		box-sizing: border-box;
		gap: 16rpx;

		.big-info-bg {
			height: 440rpx !important;

			.goods-list {
				width: 100%;
				height: 350rpx;
				flex-wrap: wrap;
				padding: 0 25rpx;
				box-sizing: border-box;

				.item {
					width: 130rpx;
					height: fit-content;
					overflow: hidden;
					margin-bottom: 15rpx;

					.file {
						width: 130rpx;
						height: 130rpx;
						position: relative;

						.img {
							width: 100%;
							height: 100%;
						}

						.discount-bg {
							position: absolute;
							right: 0;
							bottom: 0;
							width: 135rpx;
							height: 28rpx;
							padding-left: 30rpx;
							box-sizing: border-box;
							color: white;
						}
					}

					.price {
						margin-top: 17rpx;
						width: fit-content;
						color: #eb5c20;
					}
				}
			}
		}

		.info-bg {
			width: 346rpx;
			height: 210rpx;
			background-color: white;
			border-radius: 16rpx;
			overflow: hidden;

			.title-bg {
				width: 100%;
				height: 70rpx;
				padding: 18rpx 18rpx 0rpx;
				overflow: hidden;
				box-sizing: border-box;

				.title-img {
					width: auto;
					height: 26rpx;
				}

				.desc-bg {
					margin-left: 9rpx;
					flex: 1;
					overflow: hidden;

					.desc {
						--limit-num: 1;
						height: 32rpx;
						line-height: 32rpx;
						text-align: center;
						width: fit-content;
						max-width: 100%;
						overflow: hidden;
						background-color: $theme-color;
						color: $bg-text-color;
						border-radius: 10rpx;
						padding: 0 6rpx;
						box-sizing: border-box;
					}
				}
			}
			.list {
				width: 100%;
				height: 120rpx;
				overflow: hidden;
				white-space: nowrap;

				.item {
					display: inline-block;
					width: 120rpx;
					height: 120rpx;
					margin-left: 14rpx;
					position: relative;

					&:last-child {
						margin-right: 14rpx;
					}

					.file {
						width: 120rpx;
						height: 120rpx;
					}

					.name {
						--limit-num: 1;
						position: absolute;
						left: 6rpx;
						bottom: 9rpx;
						right: 6rpx;
						overflow: hidden;
						color: white;
					}
				}
			}
		}
	}
</style>